<template>
	<view class="box">
		<view class="cont">
			<view class="top">
				<view class="info">
					<text class="name">{{lastname}}</text>
					<text class="telephone">{{phone}}</text>
				</view>
				<view class="landlord">
					{{type==1?"二手房":"租房"}}
				</view>
			</view>
			<view class="lablebox">
			</view>
			<view class="textareabox">
				<textarea value="" placeholder="请输入跟进情况" @input="shuruitem" />
				</view>
			
			<!-- 上传图片 -->
			
			<UpLoadimg @successImg="successImg1" :imgList="imgList" @deleteImg="deleteImg1":imgMaxNum="4"></UpLoadimg>
				
			<view class="push" @click="push">
				提交
			</view>
		</view>
		
		<view class="list">
			<view class="listcont" v-for="(item,index) in indexList" :key="index">
				<view class="describebox">
					{{item.describe}}
				</view>
				<view class="imgsboxs" >
					<image v-for="(items,indexs) in item.images" :key="indexs" :src="items" mode=""></image>
				</view>
				<view class="timebox">
					{{item.create_time}}
				</view>
				<view class="hr">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getfollowup,getaddrecordldd} from "../../api/api/index.js"
	import ColorfulLabel from "../../components/ColorfulLabel/index.vue"
	import {uploadfiles} from "../../api/api/index.js"
	import UpLoadimg from "../../components/UpLoadimg/index.vue"
	export default{
		data(){
			return{
				imgList:[],
				imgArr:"",
				lastname:"",
				phone:"",
				hosetype:'',
				type:"",
				label:[],
				shuruitems:"",
				id:0,
				sex:"",
				describe:"",
				indexList:[],
				imgarr:[]
			}
		},
		components:{
			UpLoadimg
		},
		methods:{
			shuruitem(e){
				this.shuruitems=e.detail.value
			},
			successImg1(data){
				this.imgList.push(data)
			},
				
			deleteImg1(index){
				this.imgList.splice(index, 1)
			},
			push(){
				let a=[]
				for(let i=0;i<this.imgList.length;i++){
					a.push(this.imgList[i].url)
				}
				let data={describe:this.shuruitems,guard_users_id:this.id,imgs:a.join("|")}
				getaddrecordldd(data).then(res=>{
					this.datalist()
					uni.showToast({
						title:"提交成功",
						icon:"none",
						duration:1500
					})
					setTimeout(function () {
						uni.navigateBack({
							url:"pages/Sourceofcustomers/index"
						})
					}, 2000);
				})
			},
			// 客源跟进接口
			datalist(){
				let data={id:this.id}
				getfollowup(data).then(res=>{
					let infosr=res.data
					this.lastname=infosr.contact
					this.phone=infosr.contact_number
					this.type=infosr.type
					this.indexList=infosr.followup.map(v=>{
						v.images=v.imgs.split("|")
						return v
					})
				})
			}
		},
		onLoad(e) {
			this.id=e.id
			this.datalist()
			
		},
		components:{
			ColorfulLabel,
			UpLoadimg
		}
	}
</script>

<style>
	.box {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #EFEFEF;
	}
	.cont{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 21rpx;
		margin-top: 22rpx;
		margin-right: 20rpx;
	}
	.top{
		display: flex;
		justify-content: space-between;
		
	}
	.info{
		margin-top: 34rpx;
		margin-left: 35rpx;
	}
	.name{
		font-family: MicrosoftYaHei-Bold;
		font-size: 30rpx;
		font-weight: 700;
		color: #000000;
	}
	.cell{
		font-family: MicrosoftYaHei-Bold;
		font-size: 22rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		color: #666666;
		margin-left: 24rpx;
	}
	.telephone{
		font-family: PingFang-SC-Heavy;
		font-size: 22rpx;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #666666;
		margin-left: 24rpx;
	}
	.landlord{
		width: 101rpx;
		height: 40rpx;
		background-color:#e9f4ff;
		border-radius: 20rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		color:  #57adfd;
		margin-top: 28rpx;
		margin-right: 26rpx;
	}
	.area{
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #333333;
		margin-top: 38rpx;
		margin-left: 33rpx;
	}
	.textareabox{
		width: 677rpx;
		height: 220rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		border: solid 2rpx #dfdfdf;
		margin-top: 50rpx;
		margin-left: 15rpx;
		padding: 25rpx 20rpx;
	}
	textarea{
		font-size: 24rpx;
		font-family: MicrosoftYaHei;
	}
	.add{
		width: 150rpx;
		height: 150rpx;
		margin-left: 18rpx;
	}
	.push{
		height: 90rpx;
		background-color: #fc7b63;
		border-radius: 5rpx;
		color:#ffffff;
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		text-align: center;
		line-height: 90rpx;
		margin-top: 86rpx;
	}
	
	.showimg_box{
        display: flex;
        align-items: center;
        margin-top: 20rpx;    
    }
    .show_img{
        width: 140upx;
        height: 140upx;
        border: 2upx dashed #eee;
        margin: 20upx 0;
		z-index: 9999;
	}
    image{
        width: 100%;
        height: 100%;
        border: 2upx dashed #eee;
    }
        
    .images{
        width: 140upx;
        height: 140upx;
        z-index: 999;
    }

    .imgarr{
        display: flex;
        align-items: center;
        position: relative;
        margin: 0 10upx;
    }
    .icon-cuo {
		position: absolute;
        right: -9rpx;
        top: -13rpx;
        z-index: 10009;
        border-radius:50%;
		width: 36rpx;
		height: 36rpx;
    }
	.lablebox{
		margin-top: 10rpx;
		margin-left: 17rpx;
	}
	.list{
		width: 100%;
		background-color: #ffffff;
		box-shadow: 3rpx 4rpx 7rpx 0rpx 
				rgba(180, 180, 180, 0.46);
		border-radius: 10rpx;
		padding:30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
	.listcont{
		margin-top: 10rpx;
	}
	.describebox{
		word-break:break-all
	}
	.imgsboxs{
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.imgsboxs>image{
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx;
	}
	.timebox{
		margin-left: 421rpx;
	}
	.hr{
		height: 2rpx;
		background-color: #CCCCCC;
		margin-top: 10rpx;
	}
</style>
